
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-del"></use>
                    </svg>
                    <div class="name">del</div>
                    <div class="fontclass">#icon-del</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading"></use>
                    </svg>
                    <div class="name">loading</div>
                    <div class="fontclass">#icon-loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attachment"></use>
                    </svg>
                    <div class="name">attachment</div>
                    <div class="fontclass">#icon-attachment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back2top"></use>
                    </svg>
                    <div class="name">back2top</div>
                    <div class="fontclass">#icon-back2top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-costincluded"></use>
                    </svg>
                    <div class="name">costincluded</div>
                    <div class="fontclass">#icon-costincluded</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-costnotincluded"></use>
                    </svg>
                    <div class="name">costnotincluded</div>
                    <div class="fontclass">#icon-costnotincluded</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-discoverline"></use>
                    </svg>
                    <div class="name">discover_line</div>
                    <div class="fontclass">#icon-discoverline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-discovershape"></use>
                    </svg>
                    <div class="name">discover_shape</div>
                    <div class="fontclass">#icon-discovershape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-earth"></use>
                    </svg>
                    <div class="name">earth</div>
                    <div class="fontclass">#icon-earth</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ensure"></use>
                    </svg>
                    <div class="name">ensure</div>
                    <div class="fontclass">#icon-ensure</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guide2"></use>
                    </svg>
                    <div class="name">guide_2</div>
                    <div class="fontclass">#icon-guide2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guidepost"></use>
                    </svg>
                    <div class="name">guidepost</div>
                    <div class="fontclass">#icon-guidepost</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-help"></use>
                    </svg>
                    <div class="name">help</div>
                    <div class="fontclass">#icon-help</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-homeline"></use>
                    </svg>
                    <div class="name">home_line</div>
                    <div class="fontclass">#icon-homeline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-homeshape"></use>
                    </svg>
                    <div class="name">home_shape</div>
                    <div class="fontclass">#icon-homeshape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like2line"></use>
                    </svg>
                    <div class="name">like_2_line</div>
                    <div class="fontclass">#icon-like2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sign"></use>
                    </svg>
                    <div class="name">sign</div>
                    <div class="fontclass">#icon-sign</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-announcement"></use>
                    </svg>
                    <div class="name">announcement</div>
                    <div class="fontclass">#icon-announcement</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chef"></use>
                    </svg>
                    <div class="name">chef</div>
                    <div class="fontclass">#icon-chef</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock"></use>
                    </svg>
                    <div class="name">clock</div>
                    <div class="fontclass">#icon-clock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down"></use>
                    </svg>
                    <div class="name">down</div>
                    <div class="fontclass">#icon-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enter"></use>
                    </svg>
                    <div class="name">enter</div>
                    <div class="fontclass">#icon-enter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-expression"></use>
                    </svg>
                    <div class="name">expression</div>
                    <div class="fontclass">#icon-expression</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guide"></use>
                    </svg>
                    <div class="name">guide</div>
                    <div class="fontclass">#icon-guide</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-internationalflight"></use>
                    </svg>
                    <div class="name">internationalflight</div>
                    <div class="fontclass">#icon-internationalflight</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">like</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-myline"></use>
                    </svg>
                    <div class="name">my_line</div>
                    <div class="fontclass">#icon-myline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-myshape"></use>
                    </svg>
                    <div class="name">my_shape</div>
                    <div class="fontclass">#icon-myshape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-passport"></use>
                    </svg>
                    <div class="name">passport</div>
                    <div class="fontclass">#icon-passport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-process"></use>
                    </svg>
                    <div class="name">process</div>
                    <div class="fontclass">#icon-process</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-screen"></use>
                    </svg>
                    <div class="name">screen</div>
                    <div class="fontclass">#icon-screen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ship"></use>
                    </svg>
                    <div class="name">ship</div>
                    <div class="fontclass">#icon-ship</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add2"></use>
                    </svg>
                    <div class="name">add_2</div>
                    <div class="fontclass">#icon-add2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map"></use>
                    </svg>
                    <div class="name">map</div>
                    <div class="fontclass">#icon-map</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-orderlist"></use>
                    </svg>
                    <div class="name">orderlist</div>
                    <div class="fontclass">#icon-orderlist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-parkinglot"></use>
                    </svg>
                    <div class="name">parkinglot</div>
                    <div class="fontclass">#icon-parkinglot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-passenger"></use>
                    </svg>
                    <div class="name">passenger</div>
                    <div class="fontclass">#icon-passenger</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                    </svg>
                    <div class="name">play</div>
                    <div class="fontclass">#icon-play</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refund"></use>
                    </svg>
                    <div class="name">refund</div>
                    <div class="fontclass">#icon-refund</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-selectseat"></use>
                    </svg>
                    <div class="name">selectseat</div>
                    <div class="fontclass">#icon-selectseat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-switch"></use>
                    </svg>
                    <div class="name">switch</div>
                    <div class="fontclass">#icon-switch</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ticket"></use>
                    </svg>
                    <div class="name">ticket</div>
                    <div class="fontclass">#icon-ticket</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time"></use>
                    </svg>
                    <div class="name">time</div>
                    <div class="fontclass">#icon-time</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-timetable"></use>
                    </svg>
                    <div class="name">timetable</div>
                    <div class="fontclass">#icon-timetable</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-up"></use>
                    </svg>
                    <div class="name">up</div>
                    <div class="fontclass">#icon-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vacation"></use>
                    </svg>
                    <div class="name">vacation</div>
                    <div class="fontclass">#icon-vacation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangwang"></use>
                    </svg>
                    <div class="name">wangwang</div>
                    <div class="fontclass">#icon-wangwang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-breakfast"></use>
                    </svg>
                    <div class="name">breakfast</div>
                    <div class="fontclass">#icon-breakfast</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-broadband"></use>
                    </svg>
                    <div class="name">broadband</div>
                    <div class="fontclass">#icon-broadband</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bus"></use>
                    </svg>
                    <div class="name">bus</div>
                    <div class="fontclass">#icon-bus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bussiness"></use>
                    </svg>
                    <div class="name">bussiness</div>
                    <div class="fontclass">#icon-bussiness</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendar"></use>
                    </svg>
                    <div class="name">calendar</div>
                    <div class="fontclass">#icon-calendar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-china"></use>
                    </svg>
                    <div class="name">china</div>
                    <div class="fontclass">#icon-china</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-collect"></use>
                    </svg>
                    <div class="name">collect</div>
                    <div class="fontclass">#icon-collect</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-crown"></use>
                    </svg>
                    <div class="name">crown</div>
                    <div class="fontclass">#icon-crown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-detail"></use>
                    </svg>
                    <div class="name">detail</div>
                    <div class="fontclass">#icon-detail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-endorse"></use>
                    </svg>
                    <div class="name">endorse</div>
                    <div class="fontclass">#icon-endorse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit"></use>
                    </svg>
                    <div class="name">exit</div>
                    <div class="fontclass">#icon-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-failed"></use>
                    </svg>
                    <div class="name">failed</div>
                    <div class="fontclass">#icon-failed</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flight"></use>
                    </svg>
                    <div class="name">flight</div>
                    <div class="fontclass">#icon-flight</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-food"></use>
                    </svg>
                    <div class="name">food</div>
                    <div class="fontclass">#icon-food</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hint"></use>
                    </svg>
                    <div class="name">hint</div>
                    <div class="fontclass">#icon-hint</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hotel"></use>
                    </svg>
                    <div class="name">hotel</div>
                    <div class="fontclass">#icon-hotel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-information2"></use>
                    </svg>
                    <div class="name">information_2</div>
                    <div class="fontclass">#icon-information2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-internationalattraction"></use>
                    </svg>
                    <div class="name">internationalattraction</div>
                    <div class="fontclass">#icon-internationalattraction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-journeyline"></use>
                    </svg>
                    <div class="name">journey_line</div>
                    <div class="fontclass">#icon-journeyline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-journeyshape"></use>
                    </svg>
                    <div class="name">journey_shape</div>
                    <div class="fontclass">#icon-journeyshape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lamp"></use>
                    </svg>
                    <div class="name">lamp</div>
                    <div class="fontclass">#icon-lamp</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loaction"></use>
                    </svg>
                    <div class="name">loaction</div>
                    <div class="fontclass">#icon-loaction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meeting"></use>
                    </svg>
                    <div class="name">meeting</div>
                    <div class="fontclass">#icon-meeting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more2"></use>
                    </svg>
                    <div class="name">more_2</div>
                    <div class="fontclass">#icon-more2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nationalattraction"></use>
                    </svg>
                    <div class="name">nationalattraction</div>
                    <div class="fontclass">#icon-nationalattraction</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nationglattraction2"></use>
                    </svg>
                    <div class="name">nationglattraction_2</div>
                    <div class="fontclass">#icon-nationglattraction2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navigation"></use>
                    </svg>
                    <div class="name">navigation</div>
                    <div class="fontclass">#icon-navigation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-order"></use>
                    </svg>
                    <div class="name">order</div>
                    <div class="fontclass">#icon-order</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone"></use>
                    </svg>
                    <div class="name">phone</div>
                    <div class="fontclass">#icon-phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pool"></use>
                    </svg>
                    <div class="name">pool</div>
                    <div class="fontclass">#icon-pool</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reduce"></use>
                    </svg>
                    <div class="name">reduce</div>
                    <div class="fontclass">#icon-reduce</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reminder"></use>
                    </svg>
                    <div class="name">reminder</div>
                    <div class="fontclass">#icon-reminder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sale"></use>
                    </svg>
                    <div class="name">sale</div>
                    <div class="fontclass">#icon-sale</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scan"></use>
                    </svg>
                    <div class="name">scan</div>
                    <div class="fontclass">#icon-scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-setting"></use>
                    </svg>
                    <div class="name">setting</div>
                    <div class="fontclass">#icon-setting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more"></use>
                    </svg>
                    <div class="name">more</div>
                    <div class="fontclass">#icon-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-activity"></use>
                    </svg>
                    <div class="name">activity</div>
                    <div class="fontclass">#icon-activity</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back2"></use>
                    </svg>
                    <div class="name">back_2</div>
                    <div class="fontclass">#icon-back2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diamond"></use>
                    </svg>
                    <div class="name">diamond</div>
                    <div class="fontclass">#icon-diamond</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-discovery2line"></use>
                    </svg>
                    <div class="name">discovery_2_line</div>
                    <div class="fontclass">#icon-discovery2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop"></use>
                    </svg>
                    <div class="name">shop</div>
                    <div class="fontclass">#icon-shop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shopping"></use>
                    </svg>
                    <div class="name">shopping</div>
                    <div class="fontclass">#icon-shopping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shower"></use>
                    </svg>
                    <div class="name">shower</div>
                    <div class="fontclass">#icon-shower</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sing"></use>
                    </svg>
                    <div class="name">sing</div>
                    <div class="fontclass">#icon-sing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-succed"></use>
                    </svg>
                    <div class="name">succed</div>
                    <div class="fontclass">#icon-succed</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taxi"></use>
                    </svg>
                    <div class="name">taxi</div>
                    <div class="fontclass">#icon-taxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-train"></use>
                    </svg>
                    <div class="name">train</div>
                    <div class="fontclass">#icon-train</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-training"></use>
                    </svg>
                    <div class="name">training</div>
                    <div class="fontclass">#icon-training</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unpaidorder"></use>
                    </svg>
                    <div class="name">unpaidorder</div>
                    <div class="fontclass">#icon-unpaidorder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-washmachine"></use>
                    </svg>
                    <div class="name">washmachine</div>
                    <div class="fontclass">#icon-washmachine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifi"></use>
                    </svg>
                    <div class="name">wifi</div>
                    <div class="fontclass">#icon-wifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add2journey"></use>
                    </svg>
                    <div class="name">add2journey</div>
                    <div class="fontclass">#icon-add2journey</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home2line"></use>
                    </svg>
                    <div class="name">home_2_line</div>
                    <div class="fontclass">#icon-home2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home2shape"></use>
                    </svg>
                    <div class="name">home_2_shape</div>
                    <div class="fontclass">#icon-home2shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-information"></use>
                    </svg>
                    <div class="name">information</div>
                    <div class="fontclass">#icon-information</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-journey2line"></use>
                    </svg>
                    <div class="name">journey_2_line</div>
                    <div class="fontclass">#icon-journey2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-journey2shape"></use>
                    </svg>
                    <div class="name">journey_2_shape</div>
                    <div class="fontclass">#icon-journey2shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left"></use>
                    </svg>
                    <div class="name">back_3</div>
                    <div class="fontclass">#icon-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like2shape"></use>
                    </svg>
                    <div class="name">like_2_shape</div>
                    <div class="fontclass">#icon-like2shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-my2line"></use>
                    </svg>
                    <div class="name">my_2_line</div>
                    <div class="fontclass">#icon-my2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-my2shape"></use>
                    </svg>
                    <div class="name">my_2_shape</div>
                    <div class="fontclass">#icon-my2shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeballon"></use>
                    </svg>
                    <div class="name">shape_ballon</div>
                    <div class="fontclass">#icon-shapeballon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapecar"></use>
                    </svg>
                    <div class="name">shape_car</div>
                    <div class="fontclass">#icon-shapecar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapecastle"></use>
                    </svg>
                    <div class="name">shape_castle</div>
                    <div class="fontclass">#icon-shapecastle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapecrown"></use>
                    </svg>
                    <div class="name">shape_crown</div>
                    <div class="fontclass">#icon-shapecrown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapedrift"></use>
                    </svg>
                    <div class="name">shape_drift</div>
                    <div class="fontclass">#icon-shapedrift</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left1"></use>
                    </svg>
                    <div class="name">left</div>
                    <div class="fontclass">#icon-left1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remind2"></use>
                    </svg>
                    <div class="name">remind_2</div>
                    <div class="fontclass">#icon-remind2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapefood"></use>
                    </svg>
                    <div class="name">shape_food</div>
                    <div class="fontclass">#icon-shapefood</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapegarden"></use>
                    </svg>
                    <div class="name">shape_garden</div>
                    <div class="fontclass">#icon-shapegarden</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeinternationaldrive"></use>
                    </svg>
                    <div class="name">shape_internationaldrive</div>
                    <div class="fontclass">#icon-shapeinternationaldrive</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeinternationalspot"></use>
                    </svg>
                    <div class="name">shape_internationalspot</div>
                    <div class="fontclass">#icon-shapeinternationalspot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapejourney2"></use>
                    </svg>
                    <div class="name">shape_journey_2</div>
                    <div class="fontclass">#icon-shapejourney2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapejourney"></use>
                    </svg>
                    <div class="name">shape_journey</div>
                    <div class="fontclass">#icon-shapejourney</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapekid"></use>
                    </svg>
                    <div class="name">shape_kid</div>
                    <div class="fontclass">#icon-shapekid</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapelover"></use>
                    </svg>
                    <div class="name">shape_lover</div>
                    <div class="fontclass">#icon-shapelover</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapemeditation"></use>
                    </svg>
                    <div class="name">shape_meditation</div>
                    <div class="fontclass">#icon-shapemeditation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeocean"></use>
                    </svg>
                    <div class="name">shape_ocean</div>
                    <div class="fontclass">#icon-shapeocean</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeonedaytrip"></use>
                    </svg>
                    <div class="name">shape_onedaytrip</div>
                    <div class="fontclass">#icon-shapeonedaytrip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeship"></use>
                    </svg>
                    <div class="name">shape_ship</div>
                    <div class="fontclass">#icon-shapeship</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapesign"></use>
                    </svg>
                    <div class="name">shape_sign</div>
                    <div class="fontclass">#icon-shapesign</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeskiing"></use>
                    </svg>
                    <div class="name">shape_skiing</div>
                    <div class="fontclass">#icon-shapeskiing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapesleep"></use>
                    </svg>
                    <div class="name">shape_sleep</div>
                    <div class="fontclass">#icon-shapesleep</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapespot"></use>
                    </svg>
                    <div class="name">shape_spot</div>
                    <div class="fontclass">#icon-shapespot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapetaxi"></use>
                    </svg>
                    <div class="name">shape_taxi</div>
                    <div class="fontclass">#icon-shapetaxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapebook"></use>
                    </svg>
                    <div class="name">shape_book</div>
                    <div class="fontclass">#icon-shapebook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapedestination"></use>
                    </svg>
                    <div class="name">shape_destination</div>
                    <div class="fontclass">#icon-shapedestination</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapedriver"></use>
                    </svg>
                    <div class="name">shape_driver</div>
                    <div class="fontclass">#icon-shapedriver</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeflight"></use>
                    </svg>
                    <div class="name">shape_flight</div>
                    <div class="fontclass">#icon-shapeflight</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeflightjourney"></use>
                    </svg>
                    <div class="name">shape_flightjourney</div>
                    <div class="fontclass">#icon-shapeflightjourney</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapegas"></use>
                    </svg>
                    <div class="name">shape_gas</div>
                    <div class="fontclass">#icon-shapegas</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapehotel"></use>
                    </svg>
                    <div class="name">shape_hotel</div>
                    <div class="fontclass">#icon-shapehotel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapejourneymessage"></use>
                    </svg>
                    <div class="name">shape_journeymessage</div>
                    <div class="fontclass">#icon-shapejourneymessage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapenationalspot"></use>
                    </svg>
                    <div class="name">shape_nationalspot</div>
                    <div class="fontclass">#icon-shapenationalspot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapetransport"></use>
                    </svg>
                    <div class="name">shape_transport</div>
                    <div class="fontclass">#icon-shapetransport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapewangwang"></use>
                    </svg>
                    <div class="name">shape_wangwang</div>
                    <div class="fontclass">#icon-shapewangwang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapewarmspring"></use>
                    </svg>
                    <div class="name">shape_warmspring</div>
                    <div class="fontclass">#icon-shapewarmspring</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapewifiphone"></use>
                    </svg>
                    <div class="name">shape_wifiphone</div>
                    <div class="fontclass">#icon-shapewifiphone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapebus"></use>
                    </svg>
                    <div class="name">shape_bus</div>
                    <div class="fontclass">#icon-shapebus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapewifi"></use>
                    </svg>
                    <div class="name">shape_wifi</div>
                    <div class="fontclass">#icon-shapewifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingcart"></use>
                    </svg>
                    <div class="name">shoppingcart</div>
                    <div class="fontclass">#icon-shoppingcart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-travelheadlines"></use>
                    </svg>
                    <div class="name">travelheadlines</div>
                    <div class="fontclass">#icon-travelheadlines</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weekendtrip"></use>
                    </svg>
                    <div class="name">weekendtrip</div>
                    <div class="fontclass">#icon-weekendtrip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapepassport"></use>
                    </svg>
                    <div class="name">shape_passport</div>
                    <div class="fontclass">#icon-shapepassport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeticket"></use>
                    </svg>
                    <div class="name">shape_ticket</div>
                    <div class="fontclass">#icon-shapeticket</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapevacation"></use>
                    </svg>
                    <div class="name">shape_vacation</div>
                    <div class="fontclass">#icon-shapevacation</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeweekendtrip"></use>
                    </svg>
                    <div class="name">shape_weekendtrip</div>
                    <div class="fontclass">#icon-shapeweekendtrip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapetrain"></use>
                    </svg>
                    <div class="name">shape_train</div>
                    <div class="fontclass">#icon-shapetrain</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shapeshopping"></use>
                    </svg>
                    <div class="name">shape_shopping</div>
                    <div class="fontclass">#icon-shapeshopping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lightoff"></use>
                    </svg>
                    <div class="name">light_off</div>
                    <div class="fontclass">#icon-lightoff</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lighton"></use>
                    </svg>
                    <div class="name">light_on</div>
                    <div class="fontclass">#icon-lighton</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right-copy"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-discovery2shape-copy"></use>
                    </svg>
                    <div class="name">discovery_2_shape</div>
                    <div class="fontclass">#icon-discovery2shape-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share-copy"></use>
                    </svg>
                    <div class="name">share</div>
                    <div class="fontclass">#icon-share-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon2"></use>
                    </svg>
                    <div class="name">list</div>
                    <div class="fontclass">#icon-icon2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon21"></use>
                    </svg>
                    <div class="name">image</div>
                    <div class="fontclass">#icon-icon21</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back"></use>
                    </svg>
                    <div class="name">back</div>
                    <div class="fontclass">#icon-back</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">delete</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-111"></use>
                    </svg>
                    <div class="name">narrow</div>
                    <div class="fontclass">#icon-111</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fullscreen"></use>
                    </svg>
                    <div class="name">fullscreen</div>
                    <div class="fontclass">#icon-fullscreen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play_2"></use>
                    </svg>
                    <div class="name">play_2</div>
                    <div class="fontclass">#icon-play_2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pause"></use>
                    </svg>
                    <div class="name">pause</div>
                    <div class="fontclass">#icon-pause</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingcart2shape"></use>
                    </svg>
                    <div class="name">shoppingcart_2_shape</div>
                    <div class="fontclass">#icon-shoppingcart2shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoppingcart2line"></use>
                    </svg>
                    <div class="name">shoppingcart_2_line</div>
                    <div class="fontclass">#icon-shoppingcart2line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-select"></use>
                    </svg>
                    <div class="name">select</div>
                    <div class="fontclass">#icon-select</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-selectcity"></use>
                    </svg>
                    <div class="name">select_city</div>
                    <div class="fontclass">#icon-selectcity</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-selectmethod"></use>
                    </svg>
                    <div class="name">select_method</div>
                    <div class="fontclass">#icon-selectmethod</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-selectlocal"></use>
                    </svg>
                    <div class="name">select_local</div>
                    <div class="fontclass">#icon-selectlocal</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fill_recommend"></use>
                    </svg>
                    <div class="name">fill_recommend</div>
                    <div class="fontclass">#icon-fill_recommend</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fill_flight"></use>
                    </svg>
                    <div class="name">fill_flight</div>
                    <div class="fontclass">#icon-fill_flight</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fill_passport"></use>
                    </svg>
                    <div class="name">fill_passport</div>
                    <div class="fontclass">#icon-fill_passport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fill_hotel"></use>
                    </svg>
                    <div class="name">fill_hotel</div>
                    <div class="fontclass">#icon-fill_hotel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fill_car"></use>
                    </svg>
                    <div class="name">fill_car</div>
                    <div class="fontclass">#icon-fill_car</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filltransfer"></use>
                    </svg>
                    <div class="name">fill_transfer</div>
                    <div class="fontclass">#icon-filltransfer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fillwifisim"></use>
                    </svg>
                    <div class="name">fill_wifisim</div>
                    <div class="fontclass">#icon-fillwifisim</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fillticket"></use>
                    </svg>
                    <div class="name">fill_ticket</div>
                    <div class="fontclass">#icon-fillticket</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filllocalplay"></use>
                    </svg>
                    <div class="name">fill_localplay</div>
                    <div class="fontclass">#icon-filllocalplay</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more3"></use>
                    </svg>
                    <div class="name">more3</div>
                    <div class="fontclass">#icon-more3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-logo"></use>
                    </svg>
                    <div class="name">logo</div>
                    <div class="fontclass">#icon-logo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trave_days"></use>
                    </svg>
                    <div class="name">trave_days</div>
                    <div class="fontclass">#icon-trave_days</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-transfer"></use>
                    </svg>
                    <div class="name">transfer</div>
                    <div class="fontclass">#icon-transfer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weidenglu"></use>
                    </svg>
                    <div class="name">未登陆</div>
                    <div class="fontclass">#icon-weidenglu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yijianfankui"></use>
                    </svg>
                    <div class="name">意见反馈</div>
                    <div class="fontclass">#icon-yijianfankui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="fontclass">#icon-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huidaodingbu"></use>
                    </svg>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">#icon-huidaodingbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">#icon-saoyisao</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
